<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  NAvatar,
  NButton,
  NInput,
  NIcon,
  NPopover,
  NUpload,
  useMessage,
  type UploadCustomRequestOptions, type UploadFileInfo,
} from 'naive-ui'
import { Image } from '@vicons/carbon'
import EmojiPicker from './EmojiPicker.vue'
import type { FlatComment, FlatReply } from '../types/comment'
import { Icon } from '@iconify/vue'
import { upload } from '@/apis/common'
import type { CommentDTO } from '@/types/dto/CommentDTO'
import {addCommentService} from "@/apis/front/circle";

const { target } = defineProps<{
  target: FlatComment | FlatReply
  rootComment?: FlatComment
}>()

const emit = defineEmits<{
  (e: 'submit', content: string, emoji?: string): void
}>()

const message = useMessage()


// 回复占位符
const replyPlaceholder = computed(() => {
  return `回复 @${target.userName}：`
})

// 处理提交
const handleSubmit = async () => {
  await addCommentService(form.value)
  form.value.content = ''
  form.value.picUrls = []
  emit('submit', form.value.content, form.value.picUrls[0])
  message.success('发布成功')
  up.value?.clear()
}

// 处理选择表情
const handleSelectEmoji = (emoji: string) => {
  form.value.content += emoji
}
// 上传图片
const customRequest = async ({ file, onFinish }: UploadCustomRequestOptions) => {
  const formData = new FormData()
  // 上传图片, 取出file的最后一个文件
  console.log(file.file)
  formData.append('file', file.file as File)
  const res = await upload(formData)
  form.value.picUrls?.push(res.data.data)
  onFinish()
}

const onRemove = ({index}:{ file: UploadFileInfo, fileList: Array<UploadFileInfo>, index: number }) => {
  // 删除图片
  form.value.picUrls?.splice(index, 1)
}

const form = ref<CommentDTO>({
  content: '',
  picUrls: [],
  momentId: target.momentId,
  toId: target.id,
  replyType: 2,
})

const userStore = useUserStore()

const up = ref<InstanceType<typeof NUpload>>()
</script>

<template>
  <div class="reply-box pr-20px">
    <n-avatar round :size="36" :src="userStore.userInfo?.avatar" />
    <n-upload abstract :list-type="'image'" :custom-request="customRequest" @remove="onRemove" ref="up">
      <div class="reply-input-wrapper">
        <n-input
          v-model:value="form.content"
          type="textarea"
          :autosize="{ minRows: 3 }"
          show-count
          :maxlength="1000"
          :placeholder="replyPlaceholder"
        />
        <n-upload-file-list></n-upload-file-list>
        <div class="reply-actions-bar">
          <div class="reply-tools">
            <n-popover
              trigger="click"
              placement="top"
              :show-arrow="false"
              style="padding: 0"
            >
              <template #trigger>
                <n-button text size="small">
                  <template #icon>
                    <Icon icon="iconoir:emoji" width="24" height="24" />
                  </template>
                  表情
                </n-button>
              </template>
              <EmojiPicker @select="handleSelectEmoji" />
            </n-popover>

            <n-upload-trigger #="{ handleClick }" abstract>
              <n-button @click="handleClick" text>
                <template #icon>
                  <n-icon><Image /></n-icon>
                </template>
                上传
              </n-button>
            </n-upload-trigger>
          </div>
          <div class="reply-submit">
            <n-button
              type="primary"
              size="small"
              :disabled="!form.content"
              @click="handleSubmit"
            >
              发布
            </n-button>
          </div>
        </div>
      </div>
    </n-upload>
  </div>
</template>

<style scoped>
.reply-box {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  margin-left: 52px;
  margin-bottom: 12px;
}

.reply-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reply-tools {
  display: flex;
  gap: 8px;
}

.reply-submit {
  display: flex;
  gap: 8px;
}
</style>
